<template>
  <el-tabs v-model="activeTab" :tab-position="tabPosition" style="margin-left: 10px;" class="demo-tabs">
    <el-tab-pane label="事项创建" name="createMatter">
      <create-matter :row-data="selectedRowData"></create-matter>
    </el-tab-pane>
    <el-tab-pane label="任务接收" name="taskReception">
      <task-reception @create-matter="handleCreateMatter"></task-reception>
    </el-tab-pane>
    <el-tab-pane label="任务接收记录" name="role">
      <task-reception-record></task-reception-record>
    </el-tab-pane>
  </el-tabs>
</template>
<!--事项创建标签页-->
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import createMatter from "../WorkImplementation/matter/createMatter.vue";
import taskReception from "../WorkImplementation/matter/taskReception.vue";
import taskReceptionRecord from "../WorkImplementation/matter/taskReceptionRecord.vue";

const tabPosition = ref<'top' | 'right' | 'bottom' | 'left'>('top');
const activeTab = ref('createMatter'); // 设置默认的tab为 createMatter
const selectedRowData = ref(null);

const router = useRouter();

const handleCreateMatter = (row) => {
  selectedRowData.value = row;
  activeTab.value = 'createMatter';
}

// 监听浏览器的返回事件
const handlePopState = (event) => {
  // console.log('Popstate event detected:', event); // 输出事件对象，检查是否正确捕获到事件
  router.push('/WorkImplementation/index');
};

onMounted(() => {
  window.addEventListener('popstate', handlePopState);
});

onBeforeUnmount(() => {
  // // 示例：在组件销毁前执行路由跳转
  // router.push('/WorkImplementation/index');
});
</script>

<style>
</style>
